<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- v-model修饰符
           .number  将数据转换成number                   很少用
           .trim    去掉首尾空格                         经常用
           .lazy    按下回车或者失去焦点时再修改相应的值   很少用
    -->
    <div id="app">
      <input type="text" v-model.number="num" />
      <input type="text" v-model.trim="str" @keyup.enter="search" />
      <h1>{{xxx}}</h1>
      <input type="text" v-model.lazy="xxx" />
      <button @click="btnClick">点击时打印num的数据类型</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          num: 10,
          str: '',
          xxx: ''
        },
        methods: {
          btnClick () {
            console.log(typeof this.num)
          },
          search () {
            if (this.str === 'tmd') {
              console.log('请文明用语')
            }
          }
        }
      })
    </script>
  </body>
</html>
